<template>
  <div class="app-container">
    <div class="table-operate">
      <div class="table-operate-left">
        <el-button-group>
          <el-button type="primary" size="medium" @click="$refs['tableEditDrawer'].show()">表格配置</el-button>
          <el-button type="primary" size="medium" @click="$refs['operateEdit'].show()">操作配置</el-button>
          <el-button type="primary" size="medium" @click="$refs['dialogEdit'].show()">弹框配置</el-button>
          <el-button type="primary" size="medium" @click="$refs['buttonEdit'].show()">按钮配置</el-button>
        </el-button-group>
      </div>
      <div class="table-operate-right">
        <el-button icon="el-icon-view" type="text" @click="$refs['jsonPreviewer'].show()">预览JSON</el-button>
        <el-button icon="el-icon-upload" type="text" @click="loadTable">载入表格</el-button>
        <el-button icon="el-icon-download" type="text" @click="saveTable">保存表格</el-button>
      </div>
    </div>
    <avue-crud
      ref="crud"
      v-model="form"
      :option="option"
      style="margin-top:30px;"
      :data="tableOption.column || []"
      :before-open="beforeOpen"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
    />
    <el-dialog
      append-to-body
      :visible.sync="tableVisible"
      :title="isLoad ? '载入表格':'保存表格'"
    >
      <el-form ref="tableRef" :model="tabelModel" :rules="tableRules">
        <el-form-item label="表格名">
          <el-input v-model="tabelModel.tableName" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="tableVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleTableSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <jsonPreviewer ref="jsonPreviewer" />
    <tableEditDrawer ref="tableEditDrawer" />
    <operateEdit ref="operateEdit" />
    <dialogEdit ref="dialogEdit" />
    <buttonEdit ref="buttonEdit" />
  </div>
</template>

<script>
import Sortable from 'sortablejs'
import { getSystemDefine, saveSystemDefine } from '@/api/design'
import tableEditDrawer from './tableEdit'
import jsonPreviewer from './jsonPreviewer'
import operateEdit from './operateEdit'
import dialogEdit from './dialogEdit'
import buttonEdit from './buttonEdit'
import { mapMutations } from 'vuex'
import { option } from './option'
export default {
  components: { tableEditDrawer, jsonPreviewer, operateEdit, dialogEdit, buttonEdit },
  data() {
    return {
      tabelModel: {
        tableName: ''
      },
      visible: false,
      tableVisible: false,
      labelWidth: '120px',
      form: {},
      index: null,
      isLoad: false,
      tableRules: {
        tableName: [
          { required: true, message: '请输入表格名称' }
        ]
      },
      option
    }
  },
  computed: {
    tableOption: {
      get() {
        return this.$store.state.tableDesign.option
      },
      set(val) {
        this.SET_OPTION(val)
      }
    }
  },
  mounted() {
    if (this.$route.query.tableName) {
      this.getTable(this.$route.query.tableName)
      this.tabelModel.tableName = this.$route.query.tableName
    }
  },
  methods: {
    ...mapMutations('tableDesign', ['SET_OPTION']),
    loadTable() {
      this.isLoad = true
      this.tableVisible = true
    },
    saveTable() {
      this.isLoad = false
      this.tableVisible = true
    },

    beforeOpen(done) {
      done()
    },

    sortableChange(oldindex) {
      const oldrow = this.tableOption.column.splice(oldindex, 1)[0]
      this.tableOption.column.splice(oldindex, 1, oldrow)
    },
    resetForm(row) {
      Object.keys(row).forEach(ele => {
        if (ele.includes('$')) delete row[ele]
      })
      return row
    },
    rowDel(row, index) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableOption.column.splice(index, 1)
      }).catch(() => {

      })
    },
    rowUpdate(row, index, done) {
      this.tableOption.column.splice(index, 1, row)
      done()
    },
    rowSave(row, done) {
      this.tableOption.column.push(row)
      done()
    },

    // 列拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        handle: '.avue-crud__drag-handler',
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableOption.column.splice(oldIndex, 1)[0]
          _this.tableOption.column.splice(newIndex, 0, currRow)
        }
      })
    },
    getTable(tableName) {
      getSystemDefine({ key: tableName }).then(res => {
        this.SET_OPTION(res.value)
        this.tableVisible = false
        this.$nextTick(() => {
          this.rowDrop()
        })
      })
    },
    handleTableSubmit() {
      this.$refs['tableRef'].validate(valid => {
        if (valid) {
          if (this.isLoad) {
            this.getTable(this.tabelModel.tableName)
          } else {
            saveSystemDefine({
              key: this.tabelModel.tableName,
              value: this.tableOption
            }).then(() => {
              this.tableVisible = false
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.table-operate {
    display: flex;
    justify-content: space-between;
}
.table-menu {
  margin-top: 30px;
}
.sort-handle {
    cursor: pointer;
}
</style>
